<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>填写招聘信息</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f5f7fa;
            color: #2d3748;
        }
        .form-container {
            max-width: 750px;
            margin: 0 auto;
            background-color: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }
        .step-indicator {
            position: relative;
            display: flex;
            justify-content: space-between;
            padding: 20px 40px;
        }
        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        .step-number {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #e5e7eb;
            color: #6b7280;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            margin-bottom: 8px;
            transition: all 0.3s ease;
        }
        .step.active .step-number {
            background-color: #3b82f6;
            color: white;
        }
        .step.completed .step-number {
            background-color: #10b981;
            color: white;
        }
        .step-title {
            font-size: 14px;
            color: #6b7280;
        }
        .step.active .step-title {
            color: #111827;
            font-weight: 500;
        }
        .progress-line {
            position: absolute;
            height: 2px;
            background-color: #e5e7eb;
            top: 40px;
            left: 40px;
            right: 40px;
        }
        .progress-bar {
            position: absolute;
            height: 2px;
            background-color: #3b82f6;
            transition: width 0.3s ease;
        }
        .form-section {
            padding: 24px;
            display: none;
        }
        .form-section.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #374151;
        }
        .form-control {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }
        .form-control:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        .error-message {
            color: #ef4444;
            font-size: 12px;
            margin-top: 4px;
            display: none;
        }
        .has-error .form-control {
            border-color: #ef4444;
        }
        .has-error .error-message {
            display: block;
        }
        .btn-group {
            display: flex;
            justify-content: space-between;
            padding: 20px 24px;
            border-top: 1px solid #e5e7eb;
        }
        .btn {
            padding: 10px 20px;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .btn-prev {
            background-color: #f3f4f6;
            color: #4b5563;
            border: 1px solid #d1d5db;
        }
        .btn-prev:hover {
            background-color: #e5e7eb;
        }
        .btn-next {
            background-color: #3b82f6;
            color: white;
            border: 1px solid #3b82f6;
        }
        .btn-next:hover {
            background-color: #2563eb;
        }
        .btn-submit {
            background-color: #10b981;
            color: white;
            border: 1px solid #10b981;
        }
        .btn-submit:hover {
            background-color: #059669;
        }
        .radio-group {
            display: flex;
            gap: 16px;
        }
        .radio-option {
            display: flex;
            align-items: center;
        }
        .radio-input {
            margin-right: 8px;
        }
        .textarea {
            min-height: 120px;
            resize: vertical;
        }
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }
        .checkbox-option {
            display: flex;
            align-items: center;
            background-color: #f3f4f6;
            padding: 8px 12px;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .checkbox-option:hover {
            background-color: #e5e7eb;
        }
        .checkbox-option.selected {
            background-color: #dbeafe;
            color: #1d4ed8;
        }
        .checkbox-input {
            margin-right: 6px;
        }
        .header {
            display: flex;
            align-items: center;
            padding: 16px 24px;
            border-bottom: 1px solid #e5e7eb;
        }
        .back-btn {
            display: flex;
            align-items: center;
            color: #4b5563;
            font-size: 14px;
            cursor: pointer;
        }
        .back-icon {
            margin-right: 8px;
        }
        .page-title {
            font-size: 18px;
            font-weight: 600;
            margin-left: 16px;
        }
        .preview-item {
            margin-bottom: 16px;
        }
        .preview-label {
            font-weight: 500;
            color: #6b7280;
            margin-bottom: 4px;
        }
        .preview-value {
            color: #111827;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <div class="header">
            <div class="back-btn">
                <i class="fas fa-chevron-left back-icon"></i>
                <span>返回</span>
            </div>
            <div class="page-title">发布招聘信息</div>
        </div>

        <div class="step-indicator">
            <div class="progress-line"></div>
            <div class="progress-bar" style="width: 0%"></div>
            
            <div class="step active" data-step="1">
                <div class="step-number">1</div>
                <div class="step-title">基本信息</div>
            </div>
            <div class="step" data-step="2">
                <div class="step-number">2</div>
                <div class="step-title">职位要求</div>
            </div>
            <div class="step" data-step="3">
                <div class="step-number">3</div>
                <div class="step-title">待遇福利</div>
            </div>
            <div class="step" data-step="4">
                <div class="step-number">4</div>
                <div class="step-title">发布确认</div>
            </div>
        </div>

        <!-- 基本信息 -->
        <div class="form-section active" id="section-1">
            <div class="form-group">
                <label class="form-label">职位名称</label>
                <input type="text" class="form-control" id="job-title" placeholder="例如：前端开发工程师">
                <div class="error-message">请输入职位名称</div>
            </div>
            
            <div class="form-group">
                <label class="form-label">招聘类型</label>
                <div class="radio-group">
                    <label class="radio-option">
                        <input type="radio" name="job-type" class="radio-input" value="full-time" checked>
                        全职
                    </label>
                    <label class="radio-option">
                        <input type="radio" name="job-type" class="radio-input" value="part-time">
                        兼职
                    </label>
                    <label class="radio-option">
                        <input type="radio" name="job-type" class="radio-input" value="internship">
                        实习
                    </label>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">工作地点</label>
                <input type="text" class="form-control" id="location" placeholder="例如：北京市朝阳区">
                <div class="error-message">请输入工作地点</div>
            </div>
        </div>

        <!-- 职位要求 -->
        <div class="form-section" id="section-2">
            <div class="form-group">
                <label class="form-label">薪资范围</label>
                <div class="flex gap-4">
                    <div style="flex: 1;">
                        <input type="number" class="form-control" id="salary-min" placeholder="最低薪资">
                        <div class="error-message">请输入最低薪资</div>
                    </div>
                    <div style="flex: 1;">
                        <input type="number" class="form-control" id="salary-max" placeholder="最高薪资">
                        <div class="error-message">请输入最高薪资</div>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">工作经验要求</label>
                <select class="form-control" id="experience">
                    <option value="">请选择</option>
                    <option value="no-experience">不限</option>
                    <option value="1-year">1年以下</option>
                    <option value="1-3-years">1-3年</option>
                    <option value="3-5-years">3-5年</option>
                    <option value="5-years">5年以上</option>
                </select>
                <div class="error-message">请选择工作经验要求</div>
            </div>
            
            <div class="form-group">
                <label class="form-label">职位描述</label>
                <textarea class="form-control textarea" id="job-description" placeholder="请详细描述该职位的工作内容"></textarea>
                <div class="error-message">请输入职位描述</div>
            </div>
            
            <div class="form-group">
                <label class="form-label">任职要求</label>
                <textarea class="form-control textarea" id="requirements" placeholder="请列出该职位所需的技能、学历等要求"></textarea>
                <div class="error-message">请输入任职要求</div>
            </div>
        </div>

        <!-- 待遇福利 -->
        <div class="form-section" id="section-3">
            <div class="form-group">
                <label class="form-label">福利待遇</label>
                <div class="checkbox-group">
                    <label class="checkbox-option">
                        <input type="checkbox" class="checkbox-input" name="benefits" value="five-insurances">
                        五险一金
                    </label>
                    <label class="checkbox-option">
                        <input type="checkbox" class="checkbox-input" name="benefits" value="annual-leave">
                        带薪年假
                    </label>
                    <label class="checkbox-option">
                        <input type="checkbox" class="checkbox-input" name="benefits" value="bonus">
                        年终奖金
                    </label>
                    <label class="checkbox-option">
                        <input type="checkbox" class="checkbox-input" name="benefits" value="training">
                        培训发展
                    </label>
                    <label class="checkbox-option">
                        <input type="checkbox" class="checkbox-input" name="benefits" value="flexible">
                        弹性工作
                    </label>
                    <label class="checkbox-option">
                        <input type="checkbox" class="checkbox-input" name="benefits" value="meal">
                        餐补
                    </label>
                    <label class="checkbox-option">
                        <input type="checkbox" class="checkbox-input" name="benefits" value="transportation">
                        交通补贴
                    </label>
                    <label class="checkbox-option">
                        <input type="checkbox" class="checkbox-input" name="benefits" value="housing">
                        住房补贴
                    </label>
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label">其他福利</label>
                <textarea class="form-control textarea" id="other-benefits" placeholder="可填写其他福利待遇"></textarea>
            </div>
            
            <div class="form-group">
                <label class="form-label">联系方式</label>
                <input type="text" class="form-control" id="contact-name" placeholder="联系人姓名">
                <div class="error-message">请输入联系人姓名</div>
            </div>
            
            <div class="form-group">
                <input type="tel" class="form-control" id="contact-phone" placeholder="联系电话">
                <div class="error-message">请输入有效的联系电话</div>
            </div>
            
            <div class="form-group">
                <input type="email" class="form-control" id="contact-email" placeholder="电子邮箱">
                <div class="error-message">请输入有效的电子邮箱</div>
            </div>
        </div>

        <!-- 发布确认 -->
        <div class="form-section" id="section-4">
            <div class="preview-item">
                <div class="preview-label">职位名称</div>
                <div class="preview-value" id="preview-job-title"></div>
            </div>
            
            <div class="preview-item">
                <div class="preview-label">招聘类型</div>
                <div class="preview-value" id="preview-job-type"></div>
            </div>
            
            <div class="preview-item">
                <div class="preview-label">工作地点</div>
                <div class="preview-value" id="preview-location"></div>
            </div>
            
            <div class="preview-item">
                <div class="preview-label">薪资范围</div>
                <div class="preview-value" id="preview-salary"></div>
            </div>
            
            <div class="preview-item">
                <div class="preview-label">工作经验要求</div>
                <div class="preview-value" id="preview-experience"></div>
            </div>
            
            <div class="preview-item">
                <div class="preview-label">福利待遇</div>
                <div class="preview-value" id="preview-benefits"></div>
            </div>
            
            <div class="preview-item">
                <div class="preview-label">联系方式</div>
                <div class="preview-value" id="preview-contact"></div>
            </div>
            
            <div class="form-group">
                <label class="form-label">确认发布</label>
                <div class="flex items-center">
                    <input type="checkbox" id="confirm-publish" class="mr-2">
                    <label for="confirm-publish">我已确认以上信息准确无误</label>
                </div>
                <div class="error-message">请确认发布信息</div>
            </div>
        </div>

        <div class="btn-group">
            <button class="btn btn-prev" id="prev-btn" disabled>
                <i class="fas fa-chevron-left mr-1"></i>上一步
            </button>
            <button class="btn btn-next" id="next-btn">
                下一步<i class="fas fa-chevron-right ml-1"></i>
            </button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sections = document.querySelectorAll('.form-section');
            const steps = document.querySelectorAll('.step');
            const prevBtn = document.getElementById('prev-btn');
            const nextBtn = document.getElementById('next-btn');
            const progressBar = document.querySelector('.progress-bar');
            let currentStep = 1;
            const totalSteps = 4;

            // 更新步骤指示器
            function updateStepIndicator() {
                steps.forEach((step, index) => {
                    const stepNumber = parseInt(step.dataset.step);
                    
                    step.classList.remove('active', 'completed');
                    
                    if (stepNumber === currentStep) {
                        step.classList.add('active');
                    } else if (stepNumber < currentStep) {
                        step.classList.add('completed');
                    }
                });
                
                // 更新进度条
                const progressPercentage = ((currentStep - 1) / (totalSteps - 1)) * 100;
                progressBar.style.width = `${progressPercentage}%`;
                
                // 更新按钮状态
                prevBtn.disabled = currentStep === 1;
                
                if (currentStep === totalSteps) {
                    nextBtn.textContent = '确认发布';
                    nextBtn.classList.remove('btn-next');
                    nextBtn.classList.add('btn-submit');
                } else {
                    nextBtn.innerHTML = '下一步<i class="fas fa-chevron-right ml-1"></i>';
                    nextBtn.classList.remove('btn-submit');
                    nextBtn.classList.add('btn-next');
                }
            }

            // 显示当前步骤的表单部分
            function showCurrentSection() {
                sections.forEach(section => {
                    section.classList.remove('active');
                });
                
                document.getElementById(`section-${currentStep}`).classList.add('active');
                
                // 如果是确认页面，更新预览内容
                if (currentStep === 4) {
                    updatePreview();
                }
            }

            // 更新预览内容
            function updatePreview() {
                document.getElementById('preview-job-title').textContent = 
                    document.getElementById('job-title').value || '未填写';
                
                const jobType = document.querySelector('input[name="job-type"]:checked');
                document.getElementById('preview-job-type').textContent = 
                    jobType ? (jobType.value === 'full-time' ? '全职' : 
                              jobType.value === 'part-time' ? '兼职' : '实习') : '未选择';
                
                document.getElementById('preview-location').textContent = 
                    document.getElementById('location').value || '未填写';
                
                const minSalary = document.getElementById('salary-min').value;
                const maxSalary = document.getElementById('salary-max').value;
                document.getElementById('preview-salary').textContent = 
                    minSalary && maxSalary ? `${minSalary}k - ${maxSalary}k` : '未填写';
                
                const experience = document.getElementById('experience').value;
                const experienceText = {
                    'no-experience': '不限',
                    '1-year': '1年以下',
                    '1-3-years': '1-3年',
                    '3-5-years': '3-5年',
                    '5-years': '5年以上'
                };
                document.getElementById('preview-experience').textContent = 
                    experience ? experienceText[experience] : '未选择';
                
                const selectedBenefits = Array.from(document.querySelectorAll('input[name="benefits"]:checked'))
                    .map(checkbox => {
                        const benefitsText = {
                            'five-insurances': '五险一金',
                            'annual-leave': '带薪年假',
                            'bonus': '年终奖金',
                            'training': '培训发展',
                            'flexible': '弹性工作',
                            'meal': '餐补',
                            'transportation': '交通补贴',
                            'housing': '住房补贴'
                        };
                        return benefitsText[checkbox.value];
                    });
                document.getElementById('preview-benefits').textContent = 
                    selectedBenefits.length > 0 ? selectedBenefits.join('、') : '未选择';
                
                const contactName = document.getElementById('contact-name').value;
                const contactPhone = document.getElementById('contact-phone').value;
                const contactEmail = document.getElementById('contact-email').value;
                document.getElementById('preview-contact').textContent = 
                    `${contactName || '未填写'} | ${contactPhone || '未填写'} | ${contactEmail || '未填写'}`;
            }

            // 验证当前步骤的表单
            function validateCurrentStep() {
                let isValid = true;
                
                // 重置所有错误状态
                document.querySelectorAll('.form-group').forEach(group => {
                    group.classList.remove('has-error');
                });
                
                // 根据当前步骤验证不同的字段
                if (currentStep === 1) {
                    const jobTitle = document.getElementById('job-title').value.trim();
                    const location = document.getElementById('location').value.trim();
                    
                    if (!jobTitle) {
                        document.getElementById('job-title').parentElement.classList.add('has-error');
                        isValid = false;
                    }
                    
                    if (!location) {
                        document.getElementById('location').parentElement.classList.add('has-error');
                        isValid = false;
                    }
                } else if (currentStep === 2) {
                    const minSalary = document.getElementById('salary-min').value.trim();
                    const maxSalary = document.getElementById('salary-max').value.trim();
                    const experience = document.getElementById('experience').value;
                    const jobDescription = document.getElementById('job-description').value.trim();
                    const requirements = document.getElementById('requirements').value.trim();
                    
                    if (!minSalary || !maxSalary) {
                        if (!minSalary) {
                            document.getElementById('salary-min').parentElement.classList.add('has-error');
                        }
                        if (!maxSalary) {
                            document.getElementById('salary-max').parentElement.classList.add('has-error');
                        }
                        isValid = false;
                    } else if (parseInt(minSalary) > parseInt(maxSalary)) {
                        document.getElementById('salary-min').parentElement.classList.add('has-error');
                        document.getElementById('salary-min').parentElement.querySelector('.error-message').textContent = '最低薪资不能高于最高薪资';
                        document.getElementById('salary-max').parentElement.classList.add('has-error');
                        document.getElementById('salary-max').parentElement.querySelector('.error-message').textContent = '最高薪资不能低于最低薪资';
                        isValid = false;
                    }
                    
                    if (!experience) {
                        document.getElementById('experience').parentElement.classList.add('has-error');
                        isValid = false;
                    }
                    
                    if (!jobDescription) {
                        document.getElementById('job-description').parentElement.classList.add('has-error');
                        isValid = false;
                    }
                    
                    if (!requirements) {
                        document.getElementById('requirements').parentElement.classList.add('has-error');
                        isValid = false;
                    }
                } else if (currentStep === 3) {
                    const contactName = document.getElementById('contact-name').value.trim();
                    const contactPhone = document.getElementById('contact-phone').value.trim();
                    const contactEmail = document.getElementById('contact-email').value.trim();
                    
                    if (!contactName) {
                        document.getElementById('contact-name').parentElement.classList.add('has-error');
                        isValid = false;
                    }
                    
                    if (!contactPhone) {
                        document.getElementById('contact-phone').parentElement.classList.add('has-error');
                        isValid = false;
                    } else if (!/^1[3-9]\d{9}$/.test(contactPhone)) {
                        document.getElementById('contact-phone').parentElement.classList.add('has-error');
                        document.getElementById('contact-phone').parentElement.querySelector('.error-message').textContent = '请输入有效的手机号码';
                        isValid = false;
                    }
                    
                    if (!contactEmail) {
                        document.getElementById('contact-email').parentElement.classList.add('has-error');
                        isValid = false;
                    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(contactEmail)) {
                        document.getElementById('contact-email').parentElement.classList.add('has-error');
                        document.getElementById('contact-email').parentElement.querySelector('.error-message').textContent = '请输入有效的电子邮箱';
                        isValid = false;
                    }
                } else if (currentStep === 4) {
                    const isConfirmed = document.getElementById('confirm-publish').checked;
                    
                    if (!isConfirmed) {
                        document.getElementById('confirm-publish').parentElement.parentElement.classList.add('has-error');
                        isValid = false;
                    }
                }
                
                return isValid;
            }

            // 下一步按钮点击事件
            nextBtn.addEventListener('click', function() {
                if (validateCurrentStep()) {
                    if (currentStep < totalSteps) {
                        currentStep++;
                        updateStepIndicator();
                        showCurrentSection();
                    } else {
                        // 提交表单
                        alert('招聘信息发布成功！');
                        // 这里可以添加实际的表单提交逻辑
                    }
                }
            });

            // 上一步按钮点击事件
            prevBtn.addEventListener('click', function() {
                if (currentStep > 1) {
                    currentStep--;
                    updateStepIndicator();
                    showCurrentSection();
                }
            });

            // 返回按钮点击事件
            document.querySelector('.back-btn').addEventListener('click', function() {
                if (confirm('确定要离开吗？未保存的更改将会丢失。')) {
                    window.location.href = 'employer-job-management.html';
                }
            });

            // 初始化步骤指示器
            updateStepIndicator();
            
            // 福利选项点击效果
            document.querySelectorAll('.checkbox-option').forEach(option => {
                option.addEventListener('click', function() {
                    const checkbox = this.querySelector('input[type="checkbox"]');
                    checkbox.checked = !checkbox.checked;
                    
                    if (checkbox.checked) {
                        this.classList.add('selected');
                    } else {
                        this.classList.remove('selected');
                    }
                });
            });
        });
    </script>
</body>
</html>